<!doctype html>
<html class="no-js">
<head>
	<title>电影管理系统</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="../assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="../assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="../assets/css/admin.css">
     <link rel="stylesheet" href="../assets/js/layui/css/layui.css" media="all" />
    <!-- <script src="../assets/js/jquery.min.js"></script> -->
    <!-- <script src="../assets/js/app.js"></script> -->
   <style type="text/css">
    .shuju{margin-top : 40px;}
    </style>
    
</head>
<body>
<!--[if lte IE 9]><p class="browsehappy">升级你的浏览器吧！ <a href="http://se.360.cn/" target="_blank">升级浏览器</a>以获得更好的体验！</p>
<![endif]-->


</head>

<body>
<header class="am-topbar admin-header">
    <div class="am-topbar-brand"><img src="../assets/i/logo.png"></div>

    <!-- <div class="am-collapse am-topbar-collapse" id="topbar-collapse">
        <ul class="am-nav am-nav-pills am-topbar-nav admin-header-list">

            <li id="headList_order" class="kuanjie">

                <a page="admin.html" href="javascript:void(0)">用户管理</a>
                <a href="#">电影管理</a>
                <a href="#">影厅管理</a>
                <a href="#">座位管理</a>
                <a href="#">排片管理</a>
                <a page="order.html" href="javascript:void(0)">订单管理</a>
                <a href="#">会员管理</a>
                <a href="#">账号管理</a>
            </li>

            <li class="soso">

                <p>

                    <select data-am-selected="{btnWidth: 70, btnSize: 'sm', btnStyle: 'default'}">
                        <option value="a">全部</option>
                        <option value="b">用户</option>
                        <option value="c">会员</option>
                        <option value="d">电影</option>
                        <option value="e">订单</option>

                    </select>

                </p>

                <p class="ycfg"><input type="text" class="am-form-field am-input-sm" placeholder="圆角表单域"/></p>
                <p>
                    <button class="am-btn am-btn-xs am-btn-default am-xiao"><i class="am-icon-search"></i></button>
                </p>
            </li>


            <li class="am-hide-sm-only" style="float: right;"><a href="javascript:;" id="admin-fullscreen"><span
                    class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
        </ul>
    </div> -->
</header>

<div class="am-cf admin-main">

    <div class="nav-navicon admin-main admin-sidebar">


        <div id="adminName" class="sideMenu am-icon-dashboard" style="color:#aeb2b7; margin: 10px 0 0 0;"> 欢迎系统管理员：<span name="adminName"></span></div>&nbsp;&nbsp;&nbsp;<a href="#" id="logout" style="color:#aeb2b7" >退出系统</a>
        <div id="liftList_order" class="sideMenu">
        	<h3 class="am-icon-flag"><a href="index.html;">  首页</a></h3>
            <h3 page="order.html" class="am-icon-flag"><a href="javascript:void(0);"> 订单管理</a></h3>
            <ul>
                <li><a href="">订单列表</a></li>
                <li class="func" dataType='html' dataLink='ms   n.htm' iconImg='images/msn.gif'><a href="">修改订单</a></li>
                <li><a href="">删除订单</a></li>
                <li><a href="">打印订单</a></li>
            </ul>
             <h3 class="am-icon-users"><em></em> <a  href="javascript:void(0)" onclick="not()">会员管理</a></h3>
            <ul>
                <li>会员列表</li>
                <li>修改会员</li>
                <li>删除会员</li>
            </ul>
            <h3 page="movie.html" class="am-icon-cart-plus on"><em></em> <a href="javascript:void(0)"> 电影管理</a></h3>
            <ul>
                <li>电影列表</li>
                <li>添加电影</li>
                <li>修改电影</li>
                <li>删除电影</li>
            </ul>
           
            <h3 class="am-icon-volume-up"><em></em> <a onclick="not()">排片管理</a></h3>
            <ul>
                <li>排片列表</li>
                <li>增加排片</li>
                <li>修改排片</li>
                <li>删除排片</li>

            </ul>
            <h3 class="am-icon-gears"><em></em> <a onclick="not()">影厅管理</a></h3>
            <ul>
                <li>影厅列表</li>
                <li>增加影厅</li>
                <li>修改影厅</li>
                <li>删除影厅</li>
            </ul>
            <h3 class="am-icon-gears"><em></em> <a onclick="not()">座位管理</a></h3>
            <ul>
                <li>座位列表</li>
                <li>增加座位</li>
                <li>修改座位</li>
                <li>删除座位</li>
            </ul>
            <h3 page="user.html" class="am-icon-gears"><em></em> <a href="javascript:void(0);">用户管理</a></h3>
            <ul>
                <li>用户列表</li>
                <li>增加用户</li>
                <li>修改用户</li>
                <li>删除用户</li>
            </ul>
            <h3 page="code.html" class="am-icon-gears"><em></em> <a href="javascript:void(0);">验证兑换码</a></h3>
            <ul>
                <li>评论列表</li>
                <li>增加评论</li>
                <li>修改评论</li>
                <li>删除评论</li>
            </ul>
            <h3 page="admin.html" class="am-icon-gears"><em></em> <a href="javascript:void(0);">后台管理员</a></h3>
            <ul>
                <li>管理员列表</li>
                <li>增加账号</li>
                <li>修改账号</li>
                <li>删除账号</li>
            </ul>
        </div>
        <!-- sideMenu End -->

    <!--     <script type="text/javascript">
            jQuery(".sideMenu").slide({
                titCell: "h3", //鼠标触发对象
                targetCell: "ul", //与titCell一一对应，第n个titCell控制第n个targetCell的显示隐藏
                effect: "slideDown", //targetCell下拉效果
                delayTime: 300, //效果时间
                triggerTime: 150, //鼠标延迟触发时间（默认150）
                defaultPlay: true,//默认是否执行效果（默认true）
                returnDefault: true //鼠标从.sideMen移走后返回默认状态（默认false）
            });
        </script>  -->

    </div>

</div>

        <div id="admin" class="admin">


            <div class="admin-index">
                <!-- <dl data-am-scrollspy="{animation: 'slide-right', delay: 100}">
                    <dt class="qs"><i class="am-icon-users"></i></dt>
                    <dd>455</dd>
                    <dd class="f12">会员数量</dd>
                </dl> -->
                <dl data-am-scrollspy="{animation: 'slide-right', delay: 300}">
                    <dt class="cs"><i class="am-icon-area-chart"></i></dt>
                    <dd id="todayCount"></dd>
                    <dd class="f12">今日购票数量</dd>
                </dl>
                <dl data-am-scrollspy="{animation: 'slide-right', delay: 600}">
                    <dt class="hs"><i class="am-icon-shopping-cart"></i></dt>
                    <dd id="todaySum"></dd>
                    <dd class="f12">今日收入</dd>
                </dl>
                <!-- <dl data-am-scrollspy="{animation: 'slide-right', delay: 900}">
                    <dt class="ls"><i class="am-icon-cny"></i></dt>
                    <dd>455</dd>
                    <dd class="f12">全部收入</dd>
                </dl> -->
            </div>
            <div class="admin-biaoge">
                <div class="xinxitj">信息概况</div>
               <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
			   <div id="main" style="width:650px;height:350px;"></div>
              <!--   <table class="am-table">
                    <thead>
                    <tr>
                        <th>全部用户</th>
                        <th>今日新增</th>
                        <th>本月新增</th>
                        <th>会员总数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>普通用户</td>
                        <td>+20</td>
                        <td>+150</td>
                        <td> 4534</td>
                    </tr>
                    <tr>
                        <td>银卡</td>
                        <td>+20</td>
                        <td>+150</td>
                        <td> 4534</td>
                    </tr>
                    <tr>
                        <td>金卡</td>
                        <td>+20</td>
                        <td>+150</td>
                        <td> 4534</td>
                    </tr>
                    <tr>
                        <td>钻卡</td>
                        <td>+20</td>
                        <td>+150</td>
                        <td> 4534</td>
                    </tr>
                    <tr>

                        <td>合计</td>
                        <td>80</td>
                        <td>+50</td>
                        <td> 4534</td>
                    </tr>
                    </tbody>
                </table> -->

            </div> 
			<div class="shuju">
				<div id="main1" style="width:auto;height:350px;"></div>
			</div>            
                <!--      <div class="admin-biaoge">
             	<div class="xinxitj">验证兑换码</div>
             	
             	<form id="orderCode_from">
             		请输入兑换码   <input id="orderCode" name="orderCode" /> <button type="reset" value="重置" >重置</button> <button id="orderCode_bt" type="button" value="提交" >提交 </button>
					
             	</form>
 				
            </div> -->
            
   
           
            
            <div >
            	 <table id="orderCode_tb" width="100%" class="am-table am-table-bordered am-table-radius am-table-striped am-table-hover">
                    <thead>
                    <tr class="am-success">
                    	<th width="90px" class="table-set">订单编号</th>
                        <th class="table-title">电影名称</th>
                        <th  class="table-type">影厅</th>
                        <th  class="table-author am-hide-sm-only">座位</th>
                        <th  class="table-author am-hide-sm-only">购票数量</th>
                        <th class="table-author am-hide-sm-only">购票价格</th>
                        <th class="table-date am-hide-sm-only">购票日期</th>
                        <th  class="table-author am-hide-sm-only">购票用户</th>
                        <th width="80px" class="table-set">操作</th>
                    </tr>
                    </thead>
                    <tbody id="orderCode_List">
                    	
                    </tbody>
                    
                </table>
            
            </div>
        <!--     <div class="foods">
                <ul>
                   	 版权所有@2018. @author Avengers
                </ul>
                <dl><a href="" title="返回头部" class="am-icon-btn am-icon-arrow-up"></a></dl>
            </div> -->
        </div>
    <script id="template_order" type="text/html">
			<tr>	
 				   <td id="orderId"> {{d.id }} </td>
                   <td id="movieName"> {{d.schedule.movieName }} </td>
				   <td id="description"> {{d.schedule.description }} </td>
				   <td id="seats"> {{# for(var i=0;i<d.seatList.length;i++){ }} 
											<span>{{ d.seatList[i].row }}排{{ d.seatList[i].line }}座</span>

									{{# } }}
						</td>
                   <td id="movieCount"> {{d.count }} </td>
                   <td id="adjustedPrice" class="am-hide-sm-only">{{d.adjustedPrice}}</td>
                   <td id="buyDate" class="am-hide-sm-only">{{d.buyDate}}</td>
                   <td id="userName" class="am-hide-sm-only"> {{d.userName}}</td>
				   <td id="print" class="am-hide-sm-only"> <a href="javascript:void(0)">打印</a></td>
             </tr>

	</script>

    <script  src="../assets/js/jquery-3.3.1.js"></script>
    <script  src="../assets/js/common.js"></script>
    <script  src="../assets/js/jquery.form.js"></script>
    <script  src="../assets/js/layer/layer.js"></script>
    <script  src="../assets/js/layui/layui.js"></script>
 	<script src="../assets/js/amazeui.min.js"></script>
 	<script src="../static/js/test.js"></script>
 	<script src="../assets/js/echarts-all.js"></script>
 	 <script src="../assets/js/getRoleId.js"></script>
 	<script type="text/javascript" >
	
	$(function(){
		/* $("#admin").load("homePage.html"); */
		getAdminName();
		getTodayOrderCount();
		getOrderData();
		getMovieOrderCount();
	});
		
	
	//获取当天订单总数
	function getTodayOrderCount(){
		 var now = new Date();
        var year = now.getFullYear();
        var month =(now.getMonth() + 1).toString();
        var day = (now.getDate()).toString();
        if (month.length == 1) {
            month = "0" + month;
        }
        if (day.length == 1) {
            day = "0" + day;
        }
        var date = year +"-"+ month +"-"+  day;   

		$.ajax({
			url:"/moviesMaven/order/getOrderCount.htm",
		   dataType:"json",
		   data:{"date":date},
		   success:function (data) {
			$("#todayCount").text(data.result);
			getTodaySum(date);
			},
			error:function () {
                  layer.msg("查询出错");
            }
			
		});
	}
	
	//获取当天总销售额
	function getTodaySum(date){
		
		$.ajax({
			url:"/moviesMaven/order/getTodaySum.htm",
		   dataType:"json",
		   data:{"date":date},
		   success:function (data) {
			$("#todaySum").text(data.result);
			
			},
			error:function () {
                  layer.msg("查询出错");
            }
			
		});
	}
	
	//查询每月新增用户与新增订单
	function getOrderData(){
		$.ajax({
			url:"/moviesMaven/order/getMonthUserAndOrderCount.htm",
			dataType:"json",
			success:function(data){
				renderOrderData(data.userResult,data.orderResult);
			},
			error:function(){
				 layer.msg("查询出错");
			}
			
			
		});
			
		
	}
	
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	
	// 指定图表的配置项和数据
	function renderOrderData(userData,orderData){
		option = {
			    title : {
			        text: '每月新增用户量与订单量',
			        subtext: '城市猎人影院提供'
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['新增用户量','新增订单量']
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            name:'新增用户量',
			            type:'bar',
			            data:userData,
			            markPoint : {
			                data : [
			                    {type : 'max', name: '最大值'},
			                    {type : 'min', name: '最小值'}
			                ]
			            },
			            markLine : {
			                data : [
			                     /* {type : 'average', name: '平均值'}  */
			                ]
			            }
			        },
			        {
			            name:'新增订单量',
			            type:'bar',
			            data:orderData,
			            markPoint : {
			                data : [
			                	/*  {type : 'max', name: '最大'},
			                    {type : 'min', name: '最小'}  */
			                  /*   {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18}, 
			                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}   */
			                ]
			            },
			            markLine : {
			                data : [
			                     /* {type : 'average', name : '平均值'}  */
			                ]
			            }
			        }
			    ]
			};
			                    
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		
		
	}
	
	//查询每部热映电影的订单总数数据
	function getMovieOrderCount(){
		$.ajax({
			url:"/moviesMaven/moviesDetail/getMovieOrderCount.htm",
			dataType:"json",
			success:function(data){
				renderMoviesData(data.result,data.results);
			},
			error:function(){
				 layer.msg("查询出错");
			}
			
			
		});
	}
	
	var myChart1 = echarts.init(document.getElementById('main1'));
	
	function renderMoviesData(names,datas){
		option = {
			    title : {
			        text: '最新上映电影热度图',
			        subtext: '城市猎人影院提供数据',
			        y:'bottom'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient : 'vertical',
			        x : 'left',
			        data:names
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: false},
			            magicType : {
			                show: true, 
			                type: ['pie', 'funnel'],
			                option: {
			                    funnel: {
			                        x: '25%',
			                        width: '50%',
			                        funnelAlign: 'left',
			                        max: 1548
			                    }
			                }
			            },
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    calculable : true,
			    series : [
			        {
			            name:'购票量',
			            type:'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:datas
			          
			        }
			    ]
			};
		
		  myChart1.setOption(option);
		
	}
		
  /* 	[
        {value:335, name:'直接访问'},
        {value:310, name:'邮件营销'},
        {value:234, name:'联盟广告'},
        {value:135, name:'视频广告'},
        {value:1548, name:'搜索引擎'}
    ] */
	
		function getAdminName(){
			//请求登录的用户信息，渲染页面上的用户名
			$.ajax({
				url:"/moviesMaven/getLoginAdmin.htm",
				dataType:"json",
				success:function(data){
					
					if(data.success){
						$("#adminName").text("欢迎您："+data.result.adminName);
					}else{
						layer.msg(data.message);
					}
				},
				error:function(XMLHttpRequest, textStatus, errorThrown) {
					layer.msg(textStatus+":"+XMLHttpRequest.status);
				}
			});
			
			$("#orderCode_tb").hide();	
			
		}

			$("#liftList_order h3").click(function(){
				var liftPage = $(this).attr("page");
				$("#admin").load(liftPage);

			});
			
			//退出系统
			$("#logout").click(function(){
				var index = layer.load(); //锁定页面
				layer.open({
					title:"确认",
					icon:3,
					content: "您确定要退出系统吗？ ",
					btn: ['确定','取消'],
					yes:function(){
						$.ajax({
							url:"/moviesMaven/adminOut.htm",
							dataType:"json",
							success:function(data){
								if(data.success){
									location.href = "/moviesMaven/login.html"; 
								}
								layer.close(index); //解除页面
							},
							error:function(){
								layer.close(index); //解除页面
								layer.msg("退出失败，请联系管理员");
								
							}
							
						})
	
					},
					btn2: function(){
						layer.close(index); //解除页面
					 },
					cancel:function(){
						layer.close(index); //解除页面
					}
				});
			}); 
			
</script>
</body>
</html>